<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
    <link rel="stylesheet" href="bulma/bulma.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <link rel="stylesheet" href="bulma/bulma-carousel.min.css">
</head>

<body>
    <header>
        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <a class="navbar-item" href="https://bulma.io">
                    <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
                </a>

                <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
                    data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>

            <div id="navbarBasicExample" class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item">
                        Home
                    </a>

                    <a class="navbar-item">
                        Documentation
                    </a>

                    <div class="navbar-item has-dropdown is-hoverable">
                        <a class="navbar-link">
                            More
                        </a>

                        <div class="navbar-dropdown">
                            <a class="navbar-item">
                                About
                            </a>
                            <a class="navbar-item">
                                Jobs
                            </a>
                            <a class="navbar-item">
                                Contact
                            </a>
                            <hr class="navbar-divider">
                            <a class="navbar-item">
                                Report an issue
                            </a>
                        </div>
                    </div>
                </div>

                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="buttons">
                            <a class="button is-primary">
                                <strong>Sign up</strong>
                            </a>
                            <a class="button is-light">
                                Log in
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <section class="section">
            <div class="container">
                <!-- Start Carousel -->
                <div id="carousel-demo" class="has-carousel">
                    <div class="item-1">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quis maxime laborum
                            placeat,
                            ab repudiandae pariatur quibusdam aperiam corrupti ipsa neque doloribus architecto unde
                            perferendis fuga, aut adipisci tempora deserunt.</p>
                    </div>
                    <div class="item-2">
                        <p>2Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quis maxime laborum
                            placeat, ab repudiandae pariatur quibusdam aperiam corrupti ipsa neque doloribus architecto
                            unde
                            perferendis fuga, aut adipisci tempora deserunt.</p>
                    </div>
                    <div class="item-3">
                        <p>333 Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quis maxime laborum
                            placeat, ab repudiandae pariatur quibusdam aperiam corrupti ipsa neque doloribus architecto
                            unde
                            perferendis fuga, aut adipisci tempora deserunt.</p>
                    </div>
                    <div class="item-4">
                        <p>344433 Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus quis maxime
                            laborum
                            placeat, ab repudiandae pariatur quibusdam aperiam corrupti ipsa neque doloribus architecto
                            unde
                            perferendis fuga, aut adipisci tempora deserunt.</p>
                    </div>
                </div>
                <!-- End Carousel -->
            </div>
        </section>
        <section class="section">
            <div class="container">
                <h1 class="title">Section</h1>
                <h2 class="subtitle">
                    A simple container to divide your page into <strong>sections</strong>, like the one you're currently
                    reading
                </h2>
                <div class="tile is-ancestor">
                    <div class="tile">
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, eveniet eum dolores
                            vero
                            sed maxime dignissimos ducimus unde officiis quibusdam mollitia facere quia esse harum
                            consectetur repellendus pariatur quidem delectus.</p>
                    </div>
                    <div class="tile">
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur, eveniet eum dolores
                            vero
                            sed maxime dignissimos ducimus unde officiis quibusdam mollitia facere quia esse harum
                            consectetur repellendus pariatur quidem delectus.</p>
                    </div>
                </div>
                <div class="tile is-ancestor">
                    <div class="tile is-4 is-vertical is-parent">
                        <div class="tile is-child box">
                            <p class="title">One</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu
                                pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis
                                feugiat
                                facilisis.</p>
                        </div>
                        <div class="tile is-child box">
                            <p class="title">Two</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu
                                pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis
                                feugiat
                                facilisis.</p>
                        </div>
                    </div>
                    <div class="tile is-parent">
                        <div class="tile is-child box">
                            <p class="title">Three</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
                                pulvinar,
                                at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero
                                rhoncus
                                ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio
                                felis ut quam.</p>
                            <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis.
                                Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et
                                sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus
                                felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget
                                varius ligula, at volutpat tortor.</p>
                            <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue
                                lectus
                                dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus.
                                Cras
                                ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non
                                semper leo.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="container">
            <!-- level -->
            <nav class="level">
                <div class="level-item has-text-centered">
                    <div>
                        <p class="heading">Tweets</p>
                        <p class="title">3,456</p>
                    </div>
                </div>
                <div class="level-item has-text-centered">
                    <div>
                        <p class="heading">Following</p>
                        <p class="title">123</p>
                    </div>
                </div>
                <div class="level-item has-text-centered">
                    <div>
                        <p class="heading">Followers</p>
                        <p class="title">456K</p>
                    </div>
                </div>
                <div class="level-item has-text-centered">
                    <div>
                        <p class="heading">Likes</p>
                        <p class="title">789</p>
                    </div>
                </div>
            </nav>
            <nav class="level">
                <p class="level-item has-text-centered">
                    <a class="link is-info">Home</a>
                </p>
                <p class="level-item has-text-centered">
                    <a class="link is-info">Menu</a>
                </p>
                <p class="level-item has-text-centered">
                    <img src="https://bulma.io/images/bulma-type.png" alt="" style="height: 30px;">
                </p>
                <p class="level-item has-text-centered">
                    <a class="link is-info">Reservations</a>
                </p>
                <p class="level-item has-text-centered">
                    <a class="link is-info">Contact</a>
                </p>
            </nav>
        </section>

        <!-- layout -->
        <section class="container">
            <div class="columns is-vertical">
                <div class="column">
                    First column
                </div>
                <div class="column">
                    Second column
                </div>
                <div class="column">
                    Third column
                </div>
                <div class="column">
                    Fourth column
                </div>
            </div>
            <div class="columns">
                <div class="column is-three-fifths">is-three-fifths</div>
                <div class="column">Auto</div>
                <div class="column">Auto</div>
            </div>
            <div class="columns is-mobile">
                <div class="column is-4 is-offset-8">偏移</div>
            </div>

            <div class="columns">
                <div class="column is-narrow">
                    <div class="box" style="width: 200px;">
                        <p class="title is-5">指定宽度</p>
                        <p class="subtitle">This column is only 200px wide.</p>
                    </div>
                </div>
                <div class="column">
                    <div class="box">
                        <p class="title is-5">Flexible column</p>
                        <p class="subtitle">This column will take up the remaining space available.</p>
                    </div>
                </div>
            </div>

            <!-- 嵌套分栏 -->
            <div class="columns">
                <div class="column">
                    <p class="bd-notification is-info">First column</p>
                    <div class="columns is-mobile">
                        <div class="column">
                            <p class="bd-notification is-info">First nested column</p>
                        </div>
                        <div class="column">
                            <p class="bd-notification is-info">Second nested column</p>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <p class="bd-notification is-danger">Second column</p>
                    <div class="columns is-mobile">
                        <div class="column is-half">
                            <p class="bd-notification is-danger">50%</p>
                        </div>
                        <div class="column">
                            <p class="bd-notification is-danger">Auto</p>
                        </div>
                        <div class="column">
                            <p class="bd-notification is-danger">Auto</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 列间距 -->

            <div class="columns is-vcentered">
                <div class="column is-8">
                    <p class="bd-notification is-primary">First column</p>
                </div>
                <div class="column">
                    <p class="bd-notification is-primary">Second column with more content. This is so you can see the
                        vertical
                        alignment.</p>
                </div>
            </div>
        </section>
        <!-- The rest of your code will go here -->
        <section class="hero is-primary is-fullheight">
            <div class="hero-body">
                <div class="container">
                    <div class="columns is-centered">
                        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
                            <form class="box">
                                <div class="field has-text-centered">
                                    <img src="images/17news.png" alt="17新闻" width="100">
                                </div>
                                <div class="field">
                                    <label class="field">邮箱</label>
                                    <div class="control has-icons-left">
                                        <input type="email" placeholder="xx@qq.com" class="input" required>
                                        <span class="icon is-small is-left">
                                            <i class="fa fa-envelope"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="field">密码</label>
                                    <div class="control has-icons-left">
                                        <input type="password" placeholder="******" class="input" required>
                                        <span class="icon is-small is-left">
                                            <i class="fa fa-lock"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="checkbox">
                                        <input type="checkbox">
                                        记住我
                                    </label>
                                </div>
                                <div class="field">
                                    <button class="button is-success">
                                        登录
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer class="footer">
        <div class="content has-text-centered">
            <p>
                <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
                <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
                is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
            </p>
        </div>
    </footer>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

            // Check for click events on the navbar burger icon
            $(".navbar-burger").click(function () {

                // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                $(".navbar-burger").toggleClass("is-active");
                $(".navbar-menu").toggleClass("is-active");

            });
        });
    </script>
</body>

</html>
